<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的首页</title>
  <style>
    body {
      background: #333;
      margin: 0;
      padding: 0;
    }
    .box {
      width: 800px;
      height: 600px;
      margin: 80px auto;
      background: #222;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .ti {
      height: 80px;
      background: #366;
      margin: 15px 5px 0 15px;
    }

    /* 滚动条样式 */
    .box::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    .box::-webkit-scrollbar:hover {
      border-right: 2px solid #000;
    }

    .box::-webkit-scrollbar-button,
    .box::-webkit-scrollbar-track,
    .box::-webkit-scrollbar-track-piece {
      display: none;
    }

    .box:hover::-webkit-scrollbar-thumb {
      border-right: 2px solid #4cae4c;
    }
  </style>
</head>
<body>

<div class="box">
  <div class="box-inner">
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
    <div class="ti"></div>
  </div>
</div>

<!--
https://www.lyblog.net/detail/314.html
http://blog.csdn.net/hanshileiai/article/details/40398177

::-webkit-scrollbar               滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
::-webkit-scrollbar-button        滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track         外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece   内层轨道，滚动条中间部分（除去）。
::-webkit-scrollbar-thumb         滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner        边角
::-webkit-resizer                 定义右下角拖动块的样式

 -->
</body>
</html>